<!-- 帖子列表 -->
<template>
  <div>
      <el-empty v-if="article.total == 0" description="'没有找到有关的内容'"></el-empty>
    <div class="post-module-3" v-loading="docOp">
      <div class="loop-list loop-list-style-1">
        <div v-for="(item,i) in article.records" :key="i">
          <ky-article :data="item" :tag="tag" module="list"></ky-article>
        </div>
        <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
          <nav aria-label="Page navigation example">
            <el-pagination style="float:left;" layout="prev, pager, next" :total="article.total"
              :current-page="article.current" @current-change="pageChange" :page-size="article.size">
            </el-pagination>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import KyArticle from '@/components/module/ky-article'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      KyArticle
    },
    props: ['id', 'size', 'status'],
    data() {
      //这里存放数据
      return {
        docOp: false,
        userid: this.id,
        tag: [],
        currentPage: 1,
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        icons: [{
          c: 'bg-info',
          i: 'fa-video-camera'
        }, {
          c: 'bg-danger',
          i: 'fa-photo'
        }, {
          c: 'bg-success',
          i: 'fa-music'
        }],
        article: {
          current: 1,
          size:0
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      id: function (n, o) {
        this.userid = n;
        this.getTag();
        this.getArticle();
      }
    },
    //方法集合
    methods: {
      pageChange(page) {
        this.article.current = page;
        this.getArticle();
      },
      async getTag() {
        if (this.userid == "") return;
        const pram = {
          userid: this.userid
        }
        var res = await this.$api.core.getTag(pram);
        this.tag = res.data;
      },
      async getArticle() {
        if (this.userid == "") return;
        this.docOp = true;
        const pram = {
          page: {
            current: this.article.current,
            size: 3
          },
          document: {
            userid: this.userid
          }
        }
        var res = await this.$api.article.get(pram);
        if (res.code == 20000) {
          this.article = res.data;
        }
        this.docOp = false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getTag();
      this.getArticle();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
